{% extends 'backend/home-list.html' %}
{% load static %}
{% load mptt_tags %}
{% block Link %}
    <link rel="stylesheet" href="{% static 'editormd/css/editormd.css' %}"/>
{% endblock %}
{% block PageTitle %}
{% endblock %}
{% block tableItem %}
    <form class="modal-content form-validate" id="article-form">
        <div class="row g-3">
            <div class="form-floating">
                <input required type="text" data-rule='required:true|maxlength:150' class="form-control"
                       id="article-title" name="title"
                       placeholder="folder path" value="{{ article.title }}">
                <label>标题</label>
                <div class="invalid-feedback" id="article-title-err"></div>
            </div>
            <div class="col">
                <div id="test-editor">
                    <textarea name="content" id="article-content" style="">{{ article.content }}</textarea>
                </div>
            </div>
            <div id="bottom_btn_top" class="card">
                <div class="card-body mb-8">
                    <p>封面和摘要</p>
                    <div class="row">
                        <div class="col-2">
                            <label style="width:120px;"
                                   class="rounded text-center position-relative d-inline-block cursor-pointer border border-secondary border-dashed bg-white">
                                <!-- remove button -->
                                <a href="#"
                                   class="js-file-upload-avatar-squared-remove hide position-absolute absolute-top text-align-start w-100 z-index-3">
                                        <span class="d-inline-block btn btn-sm bg-secondary text-white py-1 px-2 m-1"
                                              title="remove avatar" data-tooltip="tooltip">
                                          <i class="fi fi-close m-0"></i>
                                        </span>
                                </a>

                                <span class="z-index-2 js-file-input-avatar-squared-container d-block absolute-full z-index-1 hide-empty">
                                    <span data-id="0"
                                          data-file-name="pi.jpg"
                                          style="background-image:url('{{ article.cover_url }}')"
                                          class="js-file-input-item d-inline-block position-relative overflow-hidden text-center m-0 p-0 animate-bouncein bg-cover w-100 h-100">
                                    </span>
                                </span>

                                <!-- hidden input (out of viewport, or safari will ignore it) -->
                                <input type="file" name="cover"
                                       id="article-cover"
                                       data-file-ext="jpg, png, gif"
                                       data-file-max-size-kb-per-file="11500"
                                       data-file-ext-err-msg="Allowed:"
                                       data-file-size-err-item-msg="File too large!"
                                       data-file-size-err-total-msg="Total allowed size exceeded!"
                                       data-file-toast-position="bottom-center"
                                       data-file-preview-container=".js-file-input-avatar-squared-container"
                                       data-file-preview-show-info="false"
                                       data-file-preview-class="m-0 p-0 rounded animate-bouncein"
                                       data-file-preview-img-height="120"
                                       data-file-btn-clear="a.js-file-upload-avatar-squared-remove"
                                       data-file-preview-img-cover="true"
                                       class="custom-file-input absolute-full">

                                <svg class="fill-gray-600 m-4 z-index-0" viewBox="0 0 60 60">
                                    <path d="M41.014,45.389l-9.553-4.776C30.56,40.162,30,39.256,30,38.248v-3.381c0.229-0.28,0.47-0.599,0.719-0.951c1.239-1.75,2.232-3.698,2.954-5.799C35.084,27.47,36,26.075,36,24.5v-4c0-0.963-0.36-1.896-1-2.625v-5.319c0.056-0.55,0.276-3.824-2.092-6.525C30.854,3.688,27.521,2.5,23,2.5s-7.854,1.188-9.908,3.53c-2.368,2.701-2.148,5.976-2.092,6.525v5.319c-0.64,0.729-1,1.662-1,2.625v4c0,1.217,0.553,2.352,1.497,3.109c0.916,3.627,2.833,6.36,3.503,7.237v3.309c0,0.968-0.528,1.856-1.377,2.32l-8.921,4.866C1.801,46.924,0,49.958,0,53.262V57.5h46v-4.043C46,50.018,44.089,46.927,41.014,45.389z"/>
                                    <path d="M55.467,46.526l-9.723-4.21c-0.23-0.115-0.485-0.396-0.704-0.771l6.525-0.005c0,0,0.377,0.037,0.962,0.037c1.073,0,2.638-0.122,4-0.707c0.817-0.352,1.425-1.047,1.669-1.907c0.246-0.868,0.09-1.787-0.426-2.523c-1.865-2.654-6.218-9.589-6.354-16.623c-0.003-0.121-0.397-12.083-12.21-12.18c-1.187,0.01-2.309,0.156-3.372,0.413c0.792,2.094,0.719,3.968,0.665,4.576v4.733c0.648,0.922,1,2.017,1,3.141v4c0,1.907-1.004,3.672-2.607,4.662c-0.748,2.022-1.738,3.911-2.949,5.621c-0.15,0.213-0.298,0.414-0.443,0.604v2.86c0,0.442,0.236,0.825,0.631,1.022l9.553,4.776c3.587,1.794,5.815,5.399,5.815,9.41V57.5H60v-3.697C60,50.711,58.282,47.933,55.467,46.526z"/>
                                </svg>

                            </label>
                        </div>
                        <div class="col-9">
                            <div class="form-floating mb-3">
                                <textarea placeholder="Message" id="article-abstract" name="abstract"
                                          class="form-control" rows="3" style="min-height:120px"
                                >{{ article.abstract }}</textarea>
                                <label for="contact_message">选填</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-floating mb-3">
                        <input required placeholder="标题" id="article-tags" name="tags"
                               type="text"
                               class="form-control" value="{{ article.tags_name_str }}">
                        <label>多个话题之间使用空格分开</label>
                    </div>
                    <div class="card-body text-end" style="padding: 5px;">
                        {#                        <button type="button" class="btn btn-primary transition-hover-top mb-1 saveDraft">保存草稿#}
                        {#                        </button>#}
                        <button onclick="submitSaveArticle()" type="button"
                                class="btn btn-primary transition-hover-top mb-1">保存
                        </button>
                    </div>
                    {#                <a class="px-0" style="vertical-align:middle;" data-bs-toggle="modal"#}
                    {#                   data-bs-target="#modalAddTopic" type="button">#}
                    {#                    话题标签#}
                    {#                    <svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg" fill="currentColor"#}
                    {#                         class="bi bi-chevron-right" viewBox="0 0 16 16">#}
                    {#                        <path fill-rule="evenodd"#}
                    {#                              d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>#}
                    {#                    </svg>#}
                    {#                    <a style="vertical-align: middle;" class="text-gray-600">#Django,#Docker</a>#}
                    {#                </a>#}
                    <!-- Modal -->
                    {#                {% include 'backend/modal/modal_add_topic.html' %}#}
                </div>
            </div>

        </div>
    </form>

{% endblock %}
{% block selectedItems %}

{% endblock %}

{% block javaScripts %}
    {{ block.super }}
    <script src="{% static 'js/form_validate.js' %}"></script>
    <script src="{% static 'editormd/js/editormd.js' %}"></script>
    {#    <script src="{% static 'editormd/js/jquery.min.js' %}"></script>#}
    <script type="text/javascript">
        $(function () {
            var editor = editormd("test-editor", {
                width: "100%",
                height: "860px",
                path: "{% static 'editormd/js/lib/' %}",
                toolbarAutoFixed: false,
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "{% url 'api-articles:article-upload-image' article.id %}"
            });


            $('#publish_btn').click(function () {
                {#console.log('editor.getMarkdown()', editor.getMarkdown())#}
                let formdata = new FormData($('#article-form')[0])
                console.log(formdata.get('title'))
                console.log(formdata.get('content'))
            })

        });


        function submitSaveArticle() {
            if (!ajax_validate('article')) {
                return
            }
            var forms = document.getElementById('article-form')
            var formData = new FormData(forms);
            $.ajax({
                url: "{% url 'api-articles:article-detail' article.id %}",
                type: 'PATCH',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log(res)
                    $.SOW.core.toast.show('success', '', '保存成功', 'top-center', 10000, true);
                    {#$('#modalAddArticle').modal('hide') // 隐藏model#}
                    {#forms.reset()#}
                    {#location.reload() // 刷新当前页面#}
                },
                error: function (jqXHR) {
                    ajax_error(jqXHR, 'article')
                }
            })

        }

    </script>
{% endblock %}